import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  WebView,
  Dimensions,
  Text,
  Alert,
  TouchableOpacity,
  Platform,
  PermissionsAndroid,
  ActivityIndicator,
  Linking,
} from 'react-native';
import Info from './src/demo/record/Info';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import DevicesInfo from './src/demo/deviceInfo/index.js';
import JPushModule from 'jpush-react-native';
import Scan from './src/demo/scan/scan';
const {
  height: deviceHeight,
  width: deviceWidth
} = Dimensions.get('window');

class App extends Component {
  webview = undefined;
  constructor(props) {
    super(props);
    this.state = {
      camera: true,
    };
  }
  static navigationOptions = {
    header: null,
  };
  render() {
    //const scripts = "document.addEventListener('message',function (e){eval(e.data);});";
    const { camera } = this.state;
    console.log('version---', Platform.Version);
    return (
      <View style={styles.container}>
        {/* {
          this.state.showLoad && <View style={{ flex: 1, position: 'absolute' }}><ActivityIndicator size="large" color="#0000ff" /></View>
        } */}
        {
          (() => {
            if (!camera) {
              return (<WebView
                ref='webView'
                startInLoadingState={true}
                renderLoading={() => {
                  return (
                    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><ActivityIndicator size="large" color="#0000ff" /></View>
                  )
                }}
                style={{
                  flex: 1,
                  height: deviceHeight,
                  width: deviceWidth
                }}
                source={{ uri: 'http://192.168.95.174:3000/home/4001', method: 'GET' }}
                javaScriptEnabled={true}
                onMessage={this.onBridgeMessage.bind(this)}
              //injectedJavaScript={scripts}
              />);
            } else {
              return (
                <View style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: deviceWidth }}>
                  <TouchableOpacity style={{ margin: 20, padding: 10, borderWidth: 1, display: 'flex', width: deviceWidth * 0.8, justifyContent: 'center', alignItems: 'center', borderColor: '#00ff00', borderStyle: 'solid' }} onPress={this.record.bind(this)}>
                    <Text>录音测试例子</Text>
                  </TouchableOpacity>
                  <TouchableOpacity style={{ margin: 20, padding: 10, borderWidth: 1, display: 'flex', width: deviceWidth * 0.8, justifyContent: 'center', alignItems: 'center', borderColor: '#00ff00', borderStyle: 'solid' }} onPress={this.deviceInfo.bind(this)}>
                    <Text>手机设备信息例子</Text>
                  </TouchableOpacity>
                  <TouchableOpacity style={{ margin: 20, padding: 10, borderWidth: 1, display: 'flex', width: deviceWidth * 0.8, justifyContent: 'center', alignItems: 'center', borderColor: '#00ff00', borderStyle: 'solid' }} onPress={this.scanBtn.bind(this)}>
                    <Text>扫码例子</Text>
                  </TouchableOpacity>
                  <TouchableOpacity style={{ margin: 20, padding: 10, borderWidth: 1, display: 'flex', width: deviceWidth * 0.8, justifyContent: 'center', alignItems: 'center', borderColor: '#00ff00', borderStyle: 'solid' }} onPress={this.more}>
                    <Text>更多例子自己添加</Text>
                  </TouchableOpacity>
                </View>
              )
            }
          })()
        }
      </View>
    );
  }
  loadEnd() {
    this.setState = {
      showLoad: false
    }
  }
  scanBtn() {
    this.props.navigation.navigate('Scan')
  }
  record() {
    this.props.navigation.navigate('Info')
  }
  deviceInfo() {
    this.props.navigation.navigate('DevicesInfo');
  }
  more() {
    console.log("GG");
  }
  componentDidMount() {
    // let a = "hotdog";
    // this.refs.webView.postMessage([a]);
    // 页面加载完成后获取权限
    // console.log(this.props.navigator)
    // console.log(audioPath)
    /****************************通知 start **************************************************/
    if (Platform.OS === 'android') {
      JPushModule.initPush()
      // 新版本必需写回调函数
      JPushModule.notifyJSDidLoad(resultCode => {
        if (resultCode === 0) {
        }
      })
    } else {
      JPushModule.setupPush()
    }
    // 接收自定义消息
    this.receiveCustomMsgListener = map => {
      this.setState({
        pushMsg: map.content
      })
      console.log('extras: ' + map.extras)
    }

    // 接收自定义消息JPushModule.addReceiveCustomMsgListener(this.receiveCustomMsgListener)
    this.receiveNotificationListener = map => {
      console.log('alertContent: ' + map.alertContent)
      console.log('extras: ' + map.extras)
    }
    // 接收推送通知
    JPushModule.addReceiveNotificationListener(this.receiveNotificationListener)
    // 打开通知
    this.openNotificationListener = map => {
      console.log('Opening notification!')
      console.log('map.extra: ' + map.extras)
      alert("打开了通知");
      // let webUrl = JSON.parse(map.extras).webUrl;
      // let url = webUrl.replace(new RegExp("\/", 'g'), "/")
      // Linking.canOpenURL(url).then(supported => {
      //   if (!supported) {
      //     Alert.alert('您的系统不支持打开浏览器！')
      //   } else {
      //     return Linking.openURL(url);
      //   }
      // }).catch(err => { });

    }
    JPushModule.addReceiveOpenNotificationListener(this.openNotificationListener)

    // this.getRegistrationIdListener = registrationId => {
    //   console.log('Device register succeed, registrationId ' + registrationId)
    // }
    // JPushModule.addGetRegistrationIdListener(this.getRegistrationIdListener)
    /****************************通知 end **************************************************/

  }
  onBridgeMessage(e) {
    if (e.nativeEvent.data === "record") {
      // const camera = true;
      //this.setState({ camera });
      this.record();
    } else if (e.nativeEvent.data === "pause") {
      this.stop();
    } else {
      this.play();
    }
  }

  onBack(camera) {
    Alert.alert("提示", "返回");
    camera = false;
    this.setState({ camera });
  }
}
// const StackRouteConfigs = {
//   App: {
//     screen: App,
//   },
//   DevicesInfo: {
//     screen: DevicesInfo,
//   },

// };
// const StackNavigatorConfigs = {
//   initialRouteName: 'App',
//   navigationOptions: {
//   }
// };

const RootStack = createStackNavigator(
  {
    App: App,
    DevicesInfo: DevicesInfo,
    Info: Info,
    Scan: Scan
  },
  {
    initialRouteName: 'App',
  }
);

const AppContainer = createAppContainer(RootStack);
//const Navigator = StackNavigator(StackRouteConfigs, StackNavigatorConfigs);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});
export default class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  render() {
    return <AppContainer />;
  }
}
